<template>
    <div class="card">
        <div class="card-header"><p>Card Header</p></div>
        <div class="content">
            <div class="item">当前土壤湿度</div>
            <div class="item"><span class="item-line">39.444444Rh</span></div>

            <div class="item">目标土壤湿度：</div>
            <div class="item">
                <span class="item-line">85.25555Rh</span>
            </div>

            <div class="item">
                未来五日降水量
                <span class="item-line">39.444444Rh</span>
            </div>
            <div class="item">
                植被信息:
                <span class="item-line">树</span>
            </div>
            <div class="item">
                植被需水量:
                <span class="item-line">130平方</span>
            </div>

            <div class="item item-2">
                <div class="item2">
                    <p>预计浇灌量</p>
                    <p>30分58秒</p>
                </div>
            </div>
            <div class="item item-2">
                <div class="item2">
                    <p>已浇灌量</p>
                    <p>30分58秒</p>
                </div>
            </div>
            <div class="item item-2">
                <div class="item2">
                    <p>完成时间</p>
                    <p>30分58秒</p>
                </div>
            </div>
            <div class="item">当前工作状态:</div>
            <div class="item">
                <span class="border">正常</span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
const props = withDefaults(
    defineProps<{
        title: string;
        humiditying: string;
        targetHumidity: string;
        futureRain: string;
        vegetation: string;
        vegetationWater: string;
        preirrigation: string;
        irrigationcomplete: string;
        finishTime: string;
        status: string;
    }>(),
    {
        title: 'string',
        humiditying: 'string',
        targetHumidity: 'string',
        futureRain: 'string',
        vegetation: 'string',
        vegetationWater: 'string',
        preirrigation: 'string',
        irrigationcomplete: 'string',
        finishTime: 'string',
        status: 'string'
    }
);
</script>

<style scoped lang="scss">
.card {
    width: 400px;
    height: fit-content; // 使用 fit-content 使卡片高度根据内容自动调整
    background-color: $bg-color-alpha;
    border: 2px solid $text-primary;
    border-radius: 25px;
    overflow: hidden;
    .card-header {
        height: 80px;
        display: grid;
        place-items: center;

        // p {
        //     margin: 0;
        //     font-size: 24px;
        //     font-weight: 800;
        //     max-width: 400px;
        //     max-height: 80px;
        //     width: 300px;
        //     height: 40px;
        //     line-height: 40px;

        //     background: $text-primary;
        // }
        p {
            margin: 0;
            font-size: 24px;
            font-weight: 800;
            // background: $text-primary;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 0;
        }

        // 添加蒙层
        position: relative; // 必须设置相对定位，以便伪元素能够相对于它定位
        overflow: hidden; // 防止蒙层超出元素边界

        &::before {
            content: '';
            position: absolute;
            background: $text-primary;
            width: 300px; // 蒙层宽度与 p 元素相同
            height: 40px; // 蒙层高度与 p 元素相同
            z-index: 0; // 将蒙层置于文字后面
        }
    }

    .content {
        width: 100%;
        color: $text-primary;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(
            40px,
            auto
        ); // 使用 grid-auto-rows 使行高自适应内容

        // .item-line:hover {
        //     transition: border-bottm 3s ease;
        //     border-bottom: 1px solid $text-primary;
        // }
        .item-line {
            transition: border-bottom 3s ease; // 过渡效果，3秒内平滑变化
            border-bottom: 0; // 初始时没有下划线
            cursor: pointer;
            &:hover {
                border-bottom: 1px solid $text-primary; // 鼠标悬停时显示下划线
            }
        }
        .item {
            padding: 5px;

            text-align: center;
            font-weight: 600;
            font-size: 24px;
            margin: 5px 0;
            grid-column: span 3; // 默认占据一列
            grid-row: span 1; // 默认占据一行
        }

        .item:nth-child(4) {
            margin-bottom: 20px;
        }
        .item:nth-child(7) {
            margin-bottom: 20px;
        }
        .item:nth-child(12) {
            margin-bottom: 20px;
        }
        .item:nth-child(10) {
            margin-bottom: 20px;
        }
        .item-2 {
            //item-2:item下有两个盒子
            // 特殊的 item，如完成时间，可以占据更多空间
            grid-column: span 3;
            grid-row: span 1;
            .item2 {
                display: flex;
                justify-content: space-around;
                align-items: center;
                p {
                    margin: 0;
                }
                p:nth-child(2) {
                    // font-size: 20px;
                    border: 2px solid $text-primary;
                    padding: 5px 10px;
                }
            }
        }
        .border {
            @include boder-1-solid-primary;
        }
    }
}
</style>
